<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div id="app">
    <ul>
        <li><router-link to="/">首页</router-link></li>
        <li><router-link to="/user">用户管理</router-link></li>
        <li><router-link to="/profile">个人中心</router-link></li>
    </ul>
    <!--路由匹配到的组件将会渲染在此组件中.这里的组件是我们路由的顶级出口，渲染最高级，也就是一级匹配的路由-->
    <router-view></router-view>
   </div>
   <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
   <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script> 
   <script>
    var Home = {template:'<div>Home</div>'};
    var Profile = {template:'<div>Profile</div>'};
    var User = {template:`
        <div>
            <ul>
                <li><router-link to="/user/list">用户列表</router-link></li>
                <li><router-link to="/user/add">添加用户</router-link></li>
            </ul>
            <router-view></router-view>
        </div>
    `};//此处要放置User路由对应的子路径
    var UserList = {
        template:`
          <ul>
             <li><router-link to="/user/detail/1">用户1</router-link></li>
             <li><router-link to="/user/detail/2">用户2</router-link></li>
          </ul>
        `
    }
    var UserDetail = {
        template:`<div>User:{{$route.params.id}}</div>`
    }
    var UserAdd = {
        template:`<form>用户名:<input/><input type="submit"/></form>`
    }
    var Post = {
        template:`<div>
            PostId:{{$route.params.postId}}
            view:{{$route.query.view}}
            </div>`
    }
    var routes = [
        {path:'/',component:Home},
        {name:'profile',path:'/profile',component:Profile},
        {
            path:'/user',
            component:User,
            children:[
                {
                  path:'list',// /user/list
                  component:UserList,
                },
                {
                  name:'detail',//可以给每个路由配置起一个名字  
                  path:'detail/:id',
                  component:UserDetail,
                },
                {
                  path:'add',
                  component:UserAdd
                }
            ]
        },
        {name:'post',path:'/post/:postId',component:Post},//命名路由 有名字的路由
    ]
    var router = new VueRouter({
        routes
    });
    var vm = new Vue({
        el:'#app',
        router
    });
    /**
     编程式导航 通过编程的方式进行路径的跳转 另一种命令式 <router-link>
    router.push('/post');
    router.push({name:'post'});   history.pushState();
    router.replace({name:'post'}); history.replaceState();
    //路径参数
    router.push({name:'post',params:{postId:100}}); 
    //查询参数
    router.push({name:'post',params:{postId:100},query:{view:200}}); 
    router.push('/post/100?view=200');
    /post/100?view=200
    */
   </script>
</body>
</html>